<template>
    <div class='content'>
        <p class="p28">已捐赠2次&nbsp&nbsp&nbsp&nbsp排名第106名.</p>

        <div class="list" v-for="(item, index) in detail">
            <p>{{new Date(item.date).toLocaleString()}}</p>
            <div class="book">
                <span>{{item.selected}}</span>
                <div class="number">{{Math.round(Math.random()*(100-30)+30)}}</div>
            </div>

            <dl class="status">
                <dt>捐赠状态:<span class="ing">捐赠中</span></dt>
                <!--<dd><el-badge is-dot class="item">捐赠详情</el-badge></dd>-->
                <dd>
                    <el-button
                            plain
                            @click="open(item.goodsName,item.messages)">
                        捐赠详情
                    </el-button>
                </dd>
                <dd><el-button
                        plain
                        @click="express">
                    查看物流
                </el-button></dd>
            </dl>
        </div>



    </div>
</template>
<script>
    export default{
        data(){
            return {
                detail:[]
            }
        },
        computed: {
            flag(){
                return this.$store.state.isLogined
            },
        },
        methods: {
            express(messages,goodsName) {
                const h = this.$createElement;
                this.$notify({
                    title: '物流信息',
                    type:'success',
                    message: h('i', { style: 'color: teal'}, '这里是物流信息这里是物流信息这里是物流信息这里是物流信息这里是物流信息'),
                });
            },

            open(goods,messages) {
                const h = this.$createElement;
                this.$notify({
                    title: '具体捐赠物品:'+goods,
                    message: h('i', { style: 'color: teal'}, '捐赠留言:'+messages)
                });
            },
        },
        mounted(){
            var _this = this;
            this.http.post('/users/info').then(function (res) {
                if (res.data.login == 0) {
                    console.log('用户未登录')
                } else if (res.data.login == 1) {
                    _this.detail = res.data.detail;
                }
            })
        }
    }
</script>

<style scoped>
    .content .p28 {
        margin: 20px 0;
        float: right;
        font-family: "微软雅黑";
        font-size: 20px;
        margin-right: 85px;

    }

    .content .list {
        float: left;
        width: 787px;
        height: 180px;
        border: 1px solid #D9D9D9;
        margin: 0 100px 20px 100px;
        font-family: "SimSun", "宋体";
        font-weight: bold;
    }

    .content .list p {
        float: left;
        margin-left: 20px;
        margin-right: 100px;
        font-size: 18px;
        padding-top: 20px;

        /*font;*/
    }
    .content .list .book {
        float: left;
        width: 200px;
        margin-top: 80px;
        font-size: 20px;
        font-weight: bold;
        /*align-content: center;*/
        text-align: center;
    }


    .content .book .number {
        text-align: right;
        font-weight: normal;
        font-size: 14px;
    }

    .content dl {
        float: right;
        padding-top: 50px;
        padding-right: 60px;
        font-size: 18px;

    }

    .content dl dd {
        padding-left: 50px;
        padding-top: 15px;
    }

    .content dt .ing {
        color: red;
    }

    .content dt .succeed {
        color: green;
    }
</style>


